<script setup>
import { reactive, ref, onMounted, watch, defineExpose } from 'vue'
import { getPolicy, deletePicture } from '@/apis/policy.js'
import { nanoid } from 'nanoid'
import axios from "axios"

import tinymce from 'tinymce/tinymce'
// import 'tinymce/skins/content/default/content.css'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import 'tinymce/models/dom'

import "tinymce/plugins/image";
import "tinymce/icons/default/icons"
import "tinymce/plugins/table"
import "tinymce/plugins/lists"
import "tinymce/plugins/wordcount"
import "tinymce/plugins/code"

const emits = defineEmits(["update:content"])
const props = defineProps({
  content: {
    type: String,
    default: () => {
      return ""
    },
  },
  baseUrl: {
    type: String,
    efault: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: "lists table image code",
  },//必填
  toolbar: {
    type: [String, Array],
    default:
      "codesample bold italic underline alignleft aligncenter alignright alignjustify image | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ",
  },//必填
})

const tinymceId = ref("vue-tinymce-" + nanoid())
//定义一个对象 init初始化
const init = reactive({
  selector: '#' + tinymceId.value, //富文本编辑器的id,
  language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
  language: "zh_CN", //语言
  skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
  height: '50vh', //编辑器高度
  width: '45vw',//编辑器宽度
  branding: false, //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  image_dimensions: false, //去除宽高属性
  plugins: props.plugins,  //这里的数据是在props里面就定义好了的
  toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
  font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  paste_webkit_styles: "all",
  paste_merge_formats: true,
  nonbreaking_force_tab: false,
  paste_auto_cleanup_on_paste: false,
  reactive_ruls: false,
  file_picker_types: 'file',
  content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  content: props.content,

  setup: function (editor) {
    editor.on("KeyDown", function (e) {
      // console.log('change event',editor.selection);
      if ((e.keyCode === 8 || e.keyCode === 46) && editor.selection) {
        // console.log(editor.selection)
        var selectedNode = editor.selection.getNode();
        if (selectedNode && (selectedNode.nodeName == "IMG" || selectedNode.nodeName == "img")) {
          // 只有选中状态才能删除，没选择状态还是删除不了，不知道怎么解决就这样吧，累了！！！！！
          // console.log(selectedNode.src.split("/").slice(2).join("/"))
          const imgAddress = selectedNode.src.split("/").slice(3).join("/")
          deletePicture(imgAddress);
        }
      }
    });
  },

  //图片上传
  images_upload_handler: (blobInfo, progress) => new Promise(async (resolve, reject) => {
    if (blobInfo.blob().size / 1024 / 1024 > 20) {
      reject({ message: '上传失败，图片大小请控制在 20M 以内', remove: true });
      return;
    } else {
      // const ph = import.meta.env.VITE_BASE_PATH + ":" + import.meta.env.VITE_SERVER_PORT + "/"
      const formData = new FormData();
      const res = await getPolicy();
      const addressKey = res.data.dir + "describe/" + nanoid() + blobInfo.blob().name
      const address = res.data.host + "/" + addressKey;
      formData.append('key', addressKey);
      formData.append('OSSAccessKeyId', res.data.OSSAccessKeyId);
      formData.append('expire', res.data.expire);
      formData.append('host', res.data.host);
      formData.append('policy', res.data.policy);
      formData.append('signature', res.data.signature);
      formData.append('dir', res.data.dir);
      formData.append('file', blobInfo.blob());

      axios.post(
        "http://pet-supplies-oss.oss-cn-beijing.aliyuncs.com",
        formData,
      )
        .then(() => {
          resolve(address)  //上传成功，在成功函数里填入图片路径
        })
    }
  }),


  // 文件上传
  // file_picker_callback: (callback, value, meta) => {
  //   // Provide file and text for the link dialog
  //   if (meta.filetype == 'file') {
  //     callback('mypage.html', { text: 'My text' });
  //   }

  //   // Provide image and alt text for the image dialog
  //   if (meta.filetype == 'image') {
  //     callback('myimage.jpg', { alt: 'My alt text' });
  //   }

  //   // Provide alternative source and posted for the media dialog
  //   if (meta.filetype == 'media') {
  //     callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
  //   }
  // }
})


//用于接收外部传递进来的富文本
const modelValue = ref(props.content)
// 监听外部传递进来的的数据变化
watch(
  () => props.content,
  () => {
    emits("update:content", modelValue.value)
  })

//监听富文本中的数据变化
watch(
  () => modelValue.value,
  () => {
    emits("update:content", modelValue.value)
  })

// 写个发方法设置数据，然后导出
// const setContent = (data) => {
//   // console.log('子组件的方法被调用了');
//   modelValue.value = data;
//   emits("update:content",modelValue.value)
// }

// 直接导出属性，
defineExpose({
  modelValue,
})

//在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init(init)
})

</script>

<template>
  <main>
    <editor v-model="modelValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
  </main>
</template>

<style scoped lang='scss'>
#myEditor {
  width: 500px;
  height: 300px;
}
</style>
